<script setup>
import { ref, watch, onMounted } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  mapdata: { type: Object, required: true },
});

const background = ref({
  src: '',
  width: 0,
  height: 0,
  offsetX: 0,
  offsetY: 0,
});
const scale = ref({
  max: 100,
  step: 20,
  scaling: 100,
});
const wrapper = ref({
  backgroundColor: 'rgba(0, 0, 0, 0.5)',
  lineColor: '#000000',
});

onMounted(() => {
  /** @监听 数据更新 */
  props.mapdata.addListener('data', (data) => {
    Setter(background.value, data.background, ['src', 'width', 'height', 'offsetX', 'offsetY']);
    Setter(scale.value, data.scale, ['max', 'step', 'scaling'], (v) => parseInt(v * 100));
    Setter(wrapper.value, data.wrapper, ['backgroundColor', 'lineColor']);
  });
});

/** @监听 表单变更 */
watch(background, (newValue, oldValue) => onInput(background.value, newValue, oldValue), { deep: true });
watch(wrapper, (newValue, oldValue) => onInput(wrapper.value, newValue, oldValue), { deep: true });
watch(scale, (newValue, oldValue) => onInput(scale.value, newValue, oldValue), { deep: true });

/** @事件 上传背景图片 */
function onUpload() {
  background.value.src = 'map.jpg';
  background.value.width = 1186;
  background.value.height = 2000;
  background.value.offsetX = 0;
  background.value.offsetY = 0;
  Emiter();
}

/** @事件 更新数据 */
function onInput(obj, newValue, oldValue) {
  Object.keys(newValue).forEach((key) => {
    if (['src', 'backgroundColor', 'lineColor'].includes(key)) {
      obj[key] = newValue[key];
    } else {
      obj[key] = parseInt(newValue[key]) || oldValue[key];
    }
  });
  Emiter();
}

/** @辅助 提交表单 */
let refreshId;
function Emiter() {
  clearInterval(refreshId);
  refreshId = setTimeout(() => {
    const data = props.mapdata.data;
    Setter(data.background, background.value, ['src', 'width', 'height', 'offsetX', 'offsetY']);
    Setter(data.scale, scale.value, ['max', 'step', 'scaling'], (v) => parseFloat(v / 100));
    Setter(data.wrapper, wrapper.value, ['backgroundColor', 'lineColor']);
    props.mapdata.dispatch('data', data);
  }, 300);
}

/** @辅助 设置对象属性 */
function Setter(a, b, keys, format = null) {
  keys.forEach((key) => {
    a[key] = format ? format(b[key]) : b[key];
  });
}
</script>

<template>
  <div class="MapFormer">
    <!-- 背景设置 -->
    <div class="MapFormer--row">
      <div class="MapFormer--background">
        <a-upload
          name="avatar"
          accept="image/*"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :before-upload="onUpload"
        >
          <img v-if="background.src" :src="background.src" alt="avatar" />
          <div v-else>
            <PlusOutlined />
            <div class="ant-upload-text">背景</div>
          </div>
        </a-upload>
        <div class="MapFormer--background_body">
          <div class="MapFormer--background_row">
            <a-input
              v-model:value="background.width"
              addonBefore="宽度"
              addonAfter="px"
            />
            <a-input
              v-model:value="background.offsetX"
              addonBefore="偏移X"
              addonAfter="px"
            />
          </div>
          <div class="MapFormer--background_row">
            <a-input
              v-model:value="background.height"
              addonBefore="高度"
              addonAfter="px"
            />
            <a-input
              v-model:value="background.offsetY"
              addonBefore="偏移Y"
              addonAfter="px"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 缩放设置 -->
    <div class="MapFormer--row">
      <div class="MapFormer--scale">
        <a-input
          v-model:value="scale.max"
          addonBefore="最大"
          addonAfter="%"
        />
        <a-input
          v-model:value="scale.step"
          addonBefore="步长"
          addonAfter="%"
        />
        <a-input
          v-model:value="scale.scaling"
          addonBefore="初始"
          addonAfter="%"
        />
      </div>
    </div>
    <!-- 遮罩设置 -->
    <div class="MapFormer--row">
      <div class="MapFormer--wrapper">
        <a-input
          v-model:value="wrapper.backgroundColor"
          addonBefore="遮罩颜色"
        />
        <a-input
          v-model:value="wrapper.lineColor"
          addonBefore="线段颜色"
        />
      </div>
    </div>
  </div>
</template>

<!-- 允许自定义宽高通过CSS进行控制 -->
<style scoped>
.MapFormer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 10px;
  flex-shrink: 0;
}
.MapFormer--row {}
/* 背景相关 */
.MapFormer--background {
  position: relative;
  display: flex;
  padding: 7px 8px;
  padding-left: 45px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
}
.MapFormer--background::after {
  content: '背景图片';
  position: absolute;
  text-align: center;
  font-weight: bold;
  color: #658e5f;
  left: 0;
  top: 26px;
  width: 45px;
}
.MapFormer--background_row {
  display: flex;
}
.MapFormer--background_row + .MapFormer--background_row {
  margin-top: 8px;
}
.MapFormer--background_body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.MapFormer--background /deep/ .ant-upload-wrapper {
  width: 78px;
  height: 78px;
}
.MapFormer--background /deep/ .ant-upload {
  width: 78px !important;
  height: 78px !important;
  overflow: hidden;
}
.MapFormer--background /deep/ .ant-input-group-wrapper {
  width: 168px;
  margin-left: 10px;
}
.MapFormer--background /deep/ img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
/* 缩放相关 */
.MapFormer--scale {
  position: relative;
  display: flex;
  padding: 7px 8px;
  padding-left: 45px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
}
.MapFormer--scale::after {
  content: '缩放';
  position: absolute;
  text-align: center;
  font-weight: bold;
  color: #658e5f;
  left: 0;
  top: 13px;
  width: 45px;
}
.MapFormer--scale /deep/ .ant-input-group-wrapper {
  width: 138px;
}
.MapFormer--scale /deep/ .ant-input-group-wrapper + .ant-input-group-wrapper {
  margin-left: 10px;
}
/* 遮罩相关 */
.MapFormer--wrapper {
  position: relative;
  display: flex;
  padding: 7px 8px;
  padding-left: 45px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
}
.MapFormer--wrapper::after {
  content: '遮罩';
  position: absolute;
  text-align: center;
  font-weight: bold;
  color: #658e5f;
  left: 0;
  top: 13px;
  width: 45px;
}
.MapFormer--wrapper /deep/ .ant-input-group-wrapper {
  width: 212px;
}
.MapFormer--wrapper /deep/ .ant-input-group-wrapper + .ant-input-group-wrapper {
  margin-left: 10px;
}
</style>